<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  
</body>
</html>
<script>

// //第一种
// const obj = {
//     name:"Jack",
//     age:18
// }
// function render(){
//     document.body.innerHTML = `<div>姓名：${obj.name}</div>
//                                 <div>年龄：${obj.age}</div>`;
// }
// render()
// function text(obj,type){
//     return {
//         get(){
//             return obj[type];
//         },
//         set(val){
//             obj[type] = val;
//             render();
//         }
//     }   
// }
//     const text1 = text(obj,"age").set("Rose");     
    



// //第二种    
    //     const obj = {
    //         name:"jiac",
    //         age:18
    //     }
    //     function render(data){
    //         document.body.innerHTML = `<div>姓名：${obj.name}</div><div>年龄：${obj.age}</div>` 
    //     }
    //     function response(render,data){
    //         render();

    //         const spare = {};
    //         for(const key in data){
    //              Object.defineProperty(spare,key,{
    //                 get(){
    //                     return data[key]
    //                 },
    //                 set(val){
    //                     data[key] = val;
    //                     render();
    //                 }
    //             })
    //         }
    //         return spare;
    //    }
    //    const vm = response(render,obj);
    //       console.log(vm);





//第三种 
        // const obj = {
        //     name:"Jack",
        //     age:18
        // }

        // function render(data){
        //     document.body.innerHTML = `<div>姓名：${obj.name}</div><div>年龄：${obj.age}</div>` 
        // }
        
        // function response(render,data){
        //     render(data);
        //     return new Proxy(obj,{
        //         get(){
        //             return data[key];
        //         },
        //         set(target,key,value){
        //             target[key] = value;
        //             render(target);
        //         }
        //     })
        // }
        // const vm = response(render,obj);
        // console.log(vm.age= "Rose");

 

</script>